<template>
	<view class="pages">
		<my-header bgColor="bg-gradual-blue" :isBack="true" >
			<block slot="backText">返回</block>
			<block slot="content">详情</block>
		</my-header>
        <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		        :autoplay="true" interval="5000" duration="500">
                <swiper-item v-for="(item,index) in item.imgList" :key="index">
                    <image :src="item" mode="aspectFill" ></image>
                    <!-- <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image> -->
                </swiper-item>
		</swiper>
        <view class="main">
            <view class="title">{{item.title}}</view>
            <view class="price">
                ￥{{item.price}}元/月
            </view>
            <view class="info row">
                <view class="info_item">
                    <view class="val">{{item.house_type}}</view>
                    <view class="key">户型</view>
                </view>
                <view class="info_item">
                    <view class="val">{{item.floor_sum}}/{{item.floor_cur}}层</view>
                <view class="key">总楼层/当前楼层</view>
                </view>
                <view class="info_item">
                    <view class="val">{{item.area}}㎡</view>
                    <view class="key">面积</view>

                </view>
                <view class="info_item">
                    <view class="val">{{item.pay_fun||"--"}}</view>
                    <view class="key">付款方式</view>
                </view>
            </view>
            <view class="tag_list row">
                <view class="tag" v-for="(item,index) in item.tags" :key="index">{{item}}</view>
            </view>
            <view class="tit">房源地址</view>
            <view class="address row" @click="open_address(item.latitude*1,item.longitude*1)">
                {{item.address}}
                <view class="cuIcon-right row right"></view>
            </view>
            <map style="width: 100%; height: 260px;" :latitude="item.latitude" :scale="scale" :longitude="item.longitude" :markers="item.covers">
            </map>
            <view class="tit">房源简介</view>
            <rich-text :nodes="item.content"></rich-text>
        </view>
        
        <view class="aa" style="height:120rpx;"></view>
        <view class="cu-bar bg-white tabbar border shop footer">
            <!-- <button class="action" open-type="contact">
                <view class="cuIcon-service text-green">
                    <view class="cu-tag badge"></view>
                </view>
                客服
            </button> -->
            <view class="action">
                <view class="cuIcon-home">
                    <!-- <view class="cu-tag badge">99</view> -->
                </view>
                首页
            </view>
            <view class="bg-cyan call submit">联系房东</view>
            <view class="bg-cyan yy submit">预约看房</view>
        </view>
        <loading v-if="!item.id"></loading>

	</view>
    
</template>

<script>
	export default {
		data() {
			return {
                scale:14,
                item:{
                    img_list:[
                        '/static/images/house.jpg',
                        "/static/images/house.jpg",
                        "/static/images/house.jpg",
                        "/static/images/house.jpg"
                    ],
                    title:"凤城一路--雅荷还原小区-可以短租",
                    content:"此房子租金低，免物业费",
                    latitude: 39.909,
                    longitude: 116.39742,
                    covers: [{
                        latitude: 39.909,
                        longitude: 116.39742,
                        iconPath: '/static/images/house.jpg',
                        callout:{
                            content:"凤城一路--雅荷还原小区-可以短租"

                         }
                    }]
                },
                dotStyle:true
			}
		},
		onLoad(options) {
            console.log(options);
            if (options.id) {
               this.initData(options.id) 
            }else{
                const item=uni.getStorageSync('houseList')[1]
                item.covers=[{
                        latitude: item.latitude,
                        longitude: item.longitude,
                        iconPath: '/static/images/house.jpg',
                        callout:{
                            content:item.title

                            }
                }]
          this.item=item
            }
          

		},
		methods: {
           
            async initData(id){
                const res=await uni.$request({
                    id
                },"house/index/getHouseInfo")
                if (res.code==200) {
                    let item =res.data
                    item.covers=[{
                        title:item.title,
                        latitude: item.latitude,
                        longitude: item.longitude,
                        iconPath: '/static/images/house.jpg',
                        width:100,
                        height:75,
                        
                    }]
                    this.item=item
                } else{
                    uni.$err(res.msg)
                }
                console.log(res.data);
            },
            open_address(latitude,longitude){
                // let plugin = requirePlugin('routePlan');
                // let key = 'Q4IBZ-VZLE6-BTTS7-M2XSX-DUW3O-GIFEU';  //使用在腾讯位置服务申请的key
                // let referer = '大可找房';   //调用插件的app的名称
                // let endPoint = JSON.stringify({  //终点
                //     'name': '北京西站',
                //     'latitude': 39.894806,
                //     'longitude': 116.321592
                // });
                // wx.navigateTo({
                // url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
                // });
                uni.openLocation({
                    latitude,longitude,
                    success:(res)=>{
                        console.log(res);
                    },
                    fail:(err)=>{
                        console.log(err);

                    }
                })
            
            
            },
            copy(data){
                uni.setClipboardData({
                    data,
                    success: function () {
                        console.log('success');
                    }
                });
            },
            open(url){
                console.log(url);
                 uni.navigateToMiniProgram({
                    // appId: 'wx91d27dbf599dff74',
                    appId: 'wx1edf489cb248852c',

                    path: "pages/proxy/union/union?spreadUrl=" + url,
                    extraData: {},
                    envVersion: 'release',
                    success: (res) => {
                        console.log(res);
                    },
                    fail: (err) => {
                        console.log(err);
                    },
                    complete: () => {}
       });
            }
            
		}
	}
</script>

<style lang="scss">
	@import "../../components/house/house";
	@import "./house_info";
</style>